<script setup lang="ts">
  import { reactive, ref } from "vue";
  const msg = "Hello World";
  const count = 10;
  const price = 2.5;
  const isMarry = false;
  const money = 0; // 存款
  const age = 20;
  const skills = "写代码";

  // 声明函数
  const getContent = () => {
    return "我要疯掉了";
  };
  // 定义一个点击的函数
  const clickFn = (a:number, b: number, c: number) => {
    alert("点我干嘛" + a);
  };
  const changeValue = (event: Event) => {
    const inputDom = event.target as HTMLInputElement;
    console.log("值改变了", inputDom.value);
  };
  // 键盘事件对象 取自MDN-官方的W3c的标准文档
  const enterClick = (event: Event) => {
    const obj = event as KeyboardEvent;
    // const inputDom = event.target as HTMLInputElement
    if (obj.key === "Enter") {
      alert("您点击了回车");
    }
  };
  // 改变性别
  const seperate = () => {
    isMarried.value = false;
  };

  const changeSex = () => {
    person.sex = "女";
  };
  // 人类对象

  const groupPeople = () => {
    people.value.height -= 2;
    people.value.weight += 5;
    people.value.money -= 2000000;
    people.value.childCount += 1;
  };

  // 变脸
  const changeFace = () => {
    feeling.value = `<h1 style="color:red">123</h1>`;
  };

  const person = reactive<{
    name: string,
    age: number,
    sex: "男" | "女",
  }>({
    name: "张三",
    age: 24,
    sex: "男",
  });

  // ref声明 简单或复杂数据类型
  const isMarried = ref(false);
  const people = ref<{
    name: string,
    height: number,
    weight: number,
    money: number,
    childCount: number,
  }>({
    name: "小明",
    height: 178,
    weight: 60,
    money: 9999999,
    childCount: 0,
  });
  const weather = ref("晴转多云");
  const feeling = ref(`<h2><strong style="color:blue">emo</strong></h2>`);
</script>

<template>
  <div class="container">
    <!-- 插值表达式 -->
    {{ (msg + "Vue3").split("").reverse().join("") }}
    <p>总价：{{ count * price }}</p>
    <p>年龄：{{ `${age}岁` }}</p>
    <p>婚姻状态: {{ isMarry ? "已婚" : "未婚" }}</p>
    <p>存款状态: {{ money || "穷光蛋" }}</p>
    <p>技能：{{ skills }}</p>
    <p>函数调用: {{ getContent() }}</p>
    <p>1 + 2 {{ 1 + 2 }}</p>

    <button v-on:click="clickFn(1,2,3)">测试</button>
    <!-- 完整写法v-on:事件名="方法名" -->
    <!-- 语法糖的写法 @click -->
    <button @click="clickFn(1,2,3)">测试</button>
    <!-- change/input -->
    <input type="text" @change="changeValue" @keydown="enterClick" />
    <h1>响应式数据Reactive</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
    <button @click="person.sex = '女'">变性</button>
    <button @click="changeSex">变性</button>

    <h1>Ref响应式数据-简单数据类型</h1>
    <p>婚姻状态:{{ isMarried ? "已婚" : "单身" }}</p>
    <button @click="isMarried = true">成家</button>
    <button @click="seperate">离婚</button>

    <h1>Ref响应式数据-复杂数据类型</h1>
    <p>姓名:{{ people.name }}</p>
    <p>身高:{{ people.height }}cm</p>
    <p>体重:{{ people.weight }}kg</p>
    <p>财产:{{ people.money }}$</p>
    <p>儿女个数:{{ people.childCount }}个</p>
    <button @click="groupPeople">成长</button>

    <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="feeling"></div>
    <button @click="weather = '狂风暴雨'">天气</button>
    <button @click="changeFace">变脸</button>
  </div>
</template>

<style scoped>
  .container {
    font-size: 30px;
    font-weight: bolder;
    color: brown;
  }
</style>
